<link rel="stylesheet" href="__STATIC_LIB__layuiadmin/layui/layui_ext/dtree/dtree.css">
<link rel="stylesheet" href="__STATIC_LIB__layuiadmin/layui/layui_ext/dtree/font/dtreefont.css">

<style>
    @media screen and (max-width: 500px) {

        .layui-layer.layui-layer-page {
            width: 100% !important;
            overflow: hidden !important;
            left: 0 !important;
        }

        .layui-layer-title {
            width: 100% !important;
            box-sizing: border-box;
        }

        .layui-layer-content {
            width: 100% !important;
        }
    }
</style>
<form class="layui-form seller-form" action="">
    <div class="layui-form-item">
        <div class="layui-inline">
            <input type="text" id="initstatus" name="initstatus" value = "0" autocomplete="off"
                class="layui-input layui-hide">
            <input type="text" id="pid" name="pid" value = "1" autocomplete="off"
                    class="layui-input layui-hide">
            <button class="layui-btn layui-btn-sm" lay-submit lay-filter="admin-add"><i
                    class="layui-icon">&#xe608;</i>添加</button>
        </div>
    </div>
</form>

<div class="table-body">
    <div class="layui-row layui-col-space10" style="margin-left: 0;">
        <div id="treeContainer" class="layui-col-md3" style="overflow: auto; margin: 15px 0;border-width: 1px; border-style: solid; border-color: #e6e6e6;">
            <tree id="deptTree" class="dtree" data-id="0"></tree>
        </div>
        <div id="tableContainer" class="layui-col-md9">
            <table id="userTable" lay-filter="test"></table>
        </div>
    </div>
</div>

<script src="__STATIC_JS__jquery.form.js" type="text/javascript" charset="utf-8"></script>
<script>
    layui.extend({
        dtree: '__STATIC_LIB__layuiadmin/layui/layui_ext/dtree/dtree'
    }).use(['form', 'layedit', 'laydate', 'dtree', 'table'], function () { 
        var layer = layui.layer, table = layui.table, form = layui.form, dtree = layui.dtree; 
        // 定义变量保存当前页面和当前页面数据条数
        var currPage; 
        var dataNum;

        var userTables = layui.table.render({
            elem: '#userTable',
            height: 'full-115',
            cellMinWidth: '80',
            page: 'true',
            limit: '20',
            url: "{:url('administrator/index')}?_ajax=1&pid=1",
            id: 'userTable',
            cols: [[
                { type: 'numbers' },
                { field: 'username', width: 160, title: '账号' },
                { field: 'mobile', width: 160, title: '手机号码' },
                { field: 'nickname', width: 160, title: '昵称' },
                { field: 'role_name', width: 160, title: '角色' },
                {
                    field: 'operating', title: '操作', width: 120, align: 'center', templet: function (data) {
                        var html = '';
                        html += '<a  class="layui-btn layui-btn-xs option-edit" data-id="' + data.id + '">编辑</a>';
                        html += '<a  class="layui-btn layui-btn-xs option-del layui-btn-danger" data-id="' + data.id + '">删除</a>';
                        return html;
                    }
                },
            ]], //设置表头
            done: function(res, curr, count){
                // 给变量赋值 
                dataNum = res.data.length;
                currPage = curr;
            }
        });

        tree = dtree.render({
            elem: "#deptTree",
            initLevel: 2,
            request:{"id":1},
            url: '{:url("Dept/getList")}',
            checkbar: false,    
            cache: true,
            checkbarType: "all",
            response:{message:"msg",statusCode:0},
            dataStyle: "layuiStyle",
            done: function(res, $ul, first){
                dtree.dataInit("deptTree", $('#pid').val()); 
                if($("#tableContainer").height() > 0) {
                    $("#initstatus").val('1'); 
                }
                $("#treeContainer").height($("#tableContainer").height() - 32);
            }
        });
  
        $(window).resize(function() {
            $("#treeContainer").height($("#tableContainer").height() - 32);
        });　

        // 绑定节点点击
        dtree.on("node('deptTree')" ,function(obj){
            // 清理搜索条件
            $('#mobile').val("");
            $('#truename').val("");
            $('#pid').val(obj.param.nodeId);
            $('#pname').val(obj.param.context);

            table.reload('userTable', {
                where: {pid: obj.param.nodeId, pname: obj.param.pname}
                , page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
        });

        //监听form提交  (add)
        layui.form.on('submit(admin-add)', function (data) {
            //添加 
            var topLayui = parent === self ? parent.window.layui : top.parent.window.layui;
            topLayui.index.openTabsPage("{:url('administrator/add')}?pid="+$('#pid').val(), '添加管理员'); 
            return false; 
        });

        //角色删除
        $(document).on('click', '.option-del', function () {
            var id = $(this).attr('data-id');
            layer.confirm('您确定删除此管理员吗？', {
                btn: ['确认', '取消'] //按钮
            }, function () {
                //去删除
                JsPost("{:url('administrator/del')}", { 'id': id }, function (res) {
                    //删除逻辑中判断只有一条数据时应该刷新前一页信息
                    layer.msg(res.msg);
                    if(res.status){
                        if(dataNum == 1){
                            currPage = currPage - 1;
                        }

                        table.reload('userTable', {
                            page: {
                                curr: currPage
                            }
                        });
                        return false;
                    }
                });
            }, function () {
                layer.close(1);
            });
        });

        //编辑
        $(document).on('click', '.option-edit', function () { 
            var id = $(this).attr('data-id');
            var url = "{:url('manage/administrator/edit')}" + '?id=' + id;
            var topLayui = parent === self ? parent.window.layui : top.parent.window.layui;
            topLayui.index.openTabsPage(url, '编辑管理员'); 
            return false; 
        });
    });
</script>